<template>
	<view class="content">

		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==0">
			<!-- 评论 -->
			<view class="comment">
				<!-- 	<view class="comment-title">
							<view class="comment-title1">评论（28439）</view>
							<view class="comment-title2">写评论</view>
							</view> -->
				<view class="comment-content" v-for="(item,index) in pllb">
					<view class="comment-content-name">
						<view class="comment-content-name1">
							<image src="../../static/home/ss-imgs5.png" mode=""></image>
						</view>
						<view class="comment-content-name12">赵春来</view>
						<view class="comment-content-name2">
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common4.png" mode=""></image>
							<image src="../../static/commodity/common5.png" mode=""></image>
						</view>
						<popover :btnList="jz" :active="false"  @select="wallet_select(item.commentId,$event)" style="float: right;">
							<view class="comment-content-name3">...</view>
						</popover>
					</view>
					<view class="comment-content-content">
						最热最热最热这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论
					</view>
					<view class="comment-content-foot">
						<view class="comment-content-foot1">2020-12-12 18:23</view>
						<view class="comment-content-foot2" @click="sfdj(item.commentId,item.clickType)">
							<image src="../../static/commodity/common6.png" mode=""></image>6486
						</view>

					</view>
				</view>
				<!-- 	<navigator url="./comment">
							<view class="comment-bottom">
								加载更多
							</view>
						</navigator> -->
			</view>
		</view>
		<view class="nav_item" v-if="isActive==1">
			<view class="comment">
				<view class="comment-content">
					<view class="comment-content-name">
						<view class="comment-content-name1">
							<image src="../../static/home/ss-imgs5.png" mode=""></image>
						</view>
						<view class="comment-content-name12">赵春来</view>
						<view class="comment-content-name2">
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common4.png" mode=""></image>
							<image src="../../static/commodity/common5.png" mode=""></image>
						</view>
						<view class="comment-content-name3">...</view>
					</view>
					<view class="comment-content-content">
						最新最新最新这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论
					</view>
					<view class="comment-content-foot">
						<view class="comment-content-foot1">2020-12-12 18:23</view>
						<view class="comment-content-foot2">
							<image src="../../static/commodity/common6.png" mode=""></image>6486
						</view>

					</view>
				</view>
				<view class="comment-content">
					<view class="comment-content-name">
						<view class="comment-content-name1">
							<image src="../../static/home/ss-imgs5.png" mode=""></image>
						</view>
						<view class="comment-content-name12">赵春来</view>
						<view class="comment-content-name2">
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common4.png" mode=""></image>
							<image src="../../static/commodity/common5.png" mode=""></image>
						</view>
						<view class="comment-content-name3">...</view>
					</view>
					<view class="comment-content-content">
						这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论
					</view>
					<view class="comment-content-foot">
						<view class="comment-content-foot1">2020-12-12 18:23</view>
						<view class="comment-content-foot2">
							<image src="../../static/commodity/common7.png" mode=""></image>6486
						</view>

					</view>
				</view>
				<view class="comment-content">
					<view class="comment-content-name">
						<view class="comment-content-name1">
							<image src="../../static/home/ss-imgs5.png" mode=""></image>
						</view>
						<view class="comment-content-name12">赵春来</view>
						<view class="comment-content-name2">
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common3.png" mode=""></image>
							<image src="../../static/commodity/common4.png" mode=""></image>
							<image src="../../static/commodity/common5.png" mode=""></image>
						</view>
						<view class="comment-content-name3">...</view>
					</view>
					<view class="comment-content-content">
						这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论这里是评论
					</view>
					<view class="comment-content-foot">
						<view class="comment-content-foot1">2020-12-12 18:23</view>
						<view class="comment-content-foot2">
							<image src="../../static/commodity/common6.png" mode=""></image>6486
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import popover from "../../uni_modules/uni-popover/components/dean-popover/dean-popover.vue";
	export default {
		// components: {
		// 	popover
		// },
		data() {
			return {
				jz: [
					{
						"title": '删除',
					}
				],
				navIndex: 2,
				pllb:[],
				isActive: 0,
				waresId: '',
				navList: [{
					index: 0,
					title: '最热'
				}, {
					index: 1,
					title: "最新"
				}]
			}
		},
		onLoad(parameter) {
			this.waresId = parameter.waresId
		},
		methods: {
			wallet_select(index,e){
					this.dels(index)
				// console.log(index,e)
				// if(e == 0){
				// 	console.log('走举报接口')
				// }else if(e == 1){
				// 	console.log('走删除接口')
				// 	this.dels(index)
				// }
			},
			//删除评论
			dels(ci){
				var that = this
				that.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresCommentDelete',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commentId: ci,
					},
					afterAjax: (res) => {
						console.log(res, '删除评论')
					}
				})
			},
			// 点赞评论
			sfdj(ci,ct){
				var that = this
				that.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresCommentClick',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commentId: ci,
						clickType:ct,//1点赞 0取消点赞
					},
					afterAjax: (res) => {
						console.log(res, '点赞评论')
					}
				})
			},
			checkIndex(index) {
				this.navIndex = index
			},
			checked(index) {
				this.isActive = index
			},
			waresIdpllist(){
				var that = this
				that.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresCommentList',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						waresId: this.waresId,
						pageNum:1,
						pageSize:10
					},
					afterAjax: (res) => {
						this.pllb=res.data
						console.log(res, '评论列表')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 722rpx;
		margin: 0 auto;
		// position: relative;
		height: 100%;
		.tab_nav {
			display: flex;
			justify-content: center;
			flex-direction: row;

			border-bottom: 1rpx solid #f0f0f0;
		}

		.tab_nav .navTitle {
			height: 79rpx;
			line-height: 79rpx;
			margin: 0 72rpx;
			font-size: 25rpx;
			color: #8f8f8f;
		}

		.active {
			position: relative;
			color: #000104;
		}

		.active::after {
			content: "";
			position: absolute;
			width: 50rpx;
			height: 4rpx;
			background-color: #fcda22;
			left: 0px;
			right: 0px;
			bottom: 10rpx;
			margin: auto;
		}

		.comment {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.comment-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 28rpx 0;
				.comment-content-name {
					display: flex;
					flex-direction: row;
					justify-content: left;
					margin: 25rpx;

					.comment-content-name1 {
						width: 57rpx;
						height: 57rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}

					.comment-content-name12 {
						font-size: 28rpx;
						color: #21201d;
						font-weight: 600;
						margin-right: 15rpx;
						margin-left: 25rpx;
					}

					.comment-content-name2 {
						display: flex;
						flex-direction: row;
						justify-content: left;
						width: 128rpx;
						height: 30rpx;
						margin-right: 330rpx;

						image {
							max-width: 100%;
							max-height: 100%;

						}
					}

				.comment-content-content {
					font-size: 25rpx;
					margin: 25rpx 25rpx 43rpx 42rpx;
					padding-left: 60rpx;
				}

				.comment-content-foot {
					margin: 23rpx 25rpx 30rpx 100rpx;
					font-size: 21rpx;
					color: #88836d;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.comment-content-foot1 {
						font-size: 21rpx;
						color: #9c977d;
					}
					.comment-content-foot2 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 110rpx;
						height: 28rpx;
						margin: 0 25rpx;
						image {
							max-width: 100%;
							max-height: 100%;
							margin-right: 25rpx;

						}
					}
				}
			}

			// .comment-bottom {
			// 	font-size: 25rpx;
			// 	color: #2b9cef;
			// 	text-align: center;
			// 	font-weight: 600;
			// }

		}
	}
	}
</style>
